<template>
  <!-- 添加 -->
  <div class="payadd">
    <el-tabs type="border-card">
      <el-tab-pane label="新增计费项目">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="计费项目名称" prop="payname" label-width="130px">
            <el-input v-model="ruleForm.payname"></el-input>
          </el-form-item>
          <el-form-item label="项目优先级" prop="paylevel" label-width="130px">
            <el-input v-model="ruleForm.paylevel"></el-input>
          </el-form-item>
          <el-form-item label="项目用量/时长" prop="paynum" label-width="130px">
            <el-input v-model="ruleForm.paynum"></el-input>
          </el-form-item>
          <el-form-item label="项目价格" prop="paymoney" label-width="130px">
            <el-input v-model="ruleForm.paymoney"></el-input>
          </el-form-item>
          <el-form-item label="通知状态" prop="name" label-width="130px">
            <template>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in paystatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="计费目录" prop="name" label-width="130px">
            <template>
              <el-select v-model="value1" placeholder="请选择状态">
                <el-option
                  v-for="item in option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-form>
        <!-- 富文本 -->
        <template>
          <div class="ueditor">
            <span class="ued-title">通知内容</span>
            <VueUeditorWrap
              style="height: 300px"
              class="ueditor-wrap"
              v-model="content"
              :config="editorConfig"
              @ready="onEditorReady"
            />
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <div class="btn-box">
      <el-button type="primary" icon="el-icon-back" @click="goBack"
        >返回</el-button
      >
      <el-button
        type="primary"
        @click="save"
        style="margin-bottom:10px"
        icon="el-icon-document"
        >保存</el-button
      >
      <el-button type="primary" icon="el-icon-s-promotion" @click="save"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    VueUeditorWrap,
  },
  data() {
    return {
      ruleForm: {
        name: "",
      },
      // 校验
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      // 状态选择
      paystatus: [
        {
          value: "1",
          label: "已建成",
        },
        {
          value: "2",
          label: "未建成",
        },
      ],
      value: "",
      // 计费目录
      option: [
        {
          value: "7",
          label: "电费目录",
        },
        {
          value: "8",
          label: "水费固定有目录",
        },
        {
          value: "9",
          label: "水费按量计价目录",
        },
        {
          value: "10",
          label: "天然气目录",
        },
        {
          value: "11",
          label: "物业费目录",
        },
        {
          value: "12",
          label: "宽带目录",
        },
      ],
      value1: "",
      // 富文本
      content: "", // 编辑器的内容
      editorConfig: {
        // UEditor 的配置项
        UEDITOR_HOME_URL: "/ueditor/", // UEditor 文件的路径
        serverUrl: "", // 如果需要上传功能，配置服务器端接口
        toolbars: [
          [
            "fullscreen",
            "source",
            "undo",
            "redo",
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "blockquote",
            "insertorderedlist",
            "insertunorderedlist",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "link",
            "insertimage",
            "insertvideo",
            "emotion",
            "insertcode",
            "map",
            "horizontal",
            "time",
            "date",
            "spechars",
            "searchreplace",
            "preview",
            "drafts",
            "pasteplain",
            "removeformat",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "customstyle",
            "autotypeset",
            "paragraph",
            "fontfamily",
            "fontsize",
            "forecolor",
            "backcolor",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "outdent",
            "touppercase",
            "tolowercase",
            "inserttable",
            "deletetable",
            "insertrow",
            "insertcol",
            "mergeright",
            "mergedown",
            "deleterow",
            "deletecol",
            "splittorows",
            "splittocols",
            "splittocells",
            "mergecells",
            "charts",
          ],
        ],
        autoHeightEnabled: true,
        autoFloatEnabled: true,
      },
      //
      token: localStorage.getItem("token"),
    };
  },
  methods: {
    // 富文本
    onEditorReady(editor) {
      console.log("编辑器已初始化", editor);
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 保存
    save() {
      this.$confirm("确定保存计费信息？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios({
          url: "/cost/addCostData",
          method: "POST",
          params: {
            payname: this.ruleForm.payname,
            paylevel: this.ruleForm.paylevel,
            paynum: this.ruleForm.paynum,
            paymoney: this.ruleForm.paymoney,
            paystatus: this.value,
            c_id: this.value1,
            paycontent: this.content,
            coststatus: 2,
            token: this.token,
          },
        }).then((res) => {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.goBack();
          console.log(res);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
  flex-wrap: wrap;
  margin-left: 30px;
}
.el-input {
  width: 530px;
}
.el-select {
  width: 530px;
}
// 富文本
.ueditor {
  width: 100%;
  display: flex;
}
.ueditor-wrap {
  width: 1200px;
  //   height: 800px !important;
}
.ued-title {
  margin: 0 15px 0 80px;
  font-size: 14px;
  color: #606266;
}
//
.btn-box {
  width: 100px;
  height: 110px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-evenly;
  position: fixed;
  top: 45%;
  right: 1%;
}
.el-button {
  width: 80px;
  font-size: 14px;
  margin-bottom: 15px;
}
</style>